<template>
	<div class="view_box">
		<div class="box">
			<div class="title">国际中文作答平台</div>
			<div class="content_box">
				<div class="inner_box">
					<el-input
						v-model="state.form.username"
						class="w-50 m-2"
						placeholder="请输入用户名"
						:prefix-icon="User"
					/>
				</div>
				<div class="inner_box">
					<el-input
						v-model="state.form.password"
						class="w-50 m-2"
						placeholder="请输入密码"
						:prefix-icon="Lock"
						type="password"
					/>
				</div>
				<!--                <div class="inner_box">-->
				<!--                    <el-input-->
				<!--                            v-model="state.ercode"-->
				<!--                            class="w-50 m-2"-->
				<!--                            placeholder="请输入验证码"-->
				<!--                            :prefix-icon="View"-->
				<!--                    />-->
				<!--                    <div class="codeImg"></div>-->
				<!--                    &lt;!&ndash;                    <img src="" alt="">&ndash;&gt;-->
				<!--                </div>-->
<!--				<div class="inner_box">-->
<!--					<el-radio-group v-model="state.form.userType" class="ml-4">-->
<!--						<el-radio label="1" size="large">管理员</el-radio>-->
<!--						<el-radio label="2" size="large">学生</el-radio>-->
<!--						<el-radio label="3" size="large">教师</el-radio>-->
<!--					</el-radio-group>-->
<!--				</div>-->
			</div>
			<div class="login" @click="goLogin">登录</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import {onMounted, reactive} from "vue";
import {Search, Avatar, User, Lock, View} from "@element-plus/icons";
import api from "@/api";
import {ElNotification} from "element-plus";
import {useRouter} from "vue-router";
import {useAuthUserStore} from "@/stores/authuserStore";
import Cookies from 'js-cookie'

const state = reactive({
	form: {
		password: "",
		username: ""
	}
})
const router = useRouter();
const setAuth = () => {
	// console.log(router, '1111111')
	let temp = [] as any;
	let names = ['首页', '我的课件'];
	// let names1 = ['首页', '学生管理', '个人信息管理'];
	// let names2 = ['首页', '教师管理', '学生管理', '个人信息管理'];
	temp = router.options.routes[2].children;
	console.log(temp)
	for (let i = 0; i < temp.length; i++) {
		temp[i].meta.inMenu = names.indexOf(temp[i].name) !== -1;
	}
}
const userStore = useAuthUserStore();
const goLogin = () => {
	if (state.form.password === "" || state.form.username === "") {
		ElNotification({
			title: '提示',
			message: '请填写完整信息',
			type: 'warning',
		})
	} else {
		api.login(state.form).then((res: any) => {
			console.log(res, 'res')
			if (res.data.code === 200) {
				ElNotification({title: "登录成功", type: "success"});
				Cookies.set('token', res.data.data.token)
				userStore.token = res.data.data.token
				userStore.setToken(res.data.data.token)
				setAuth()
				router.push("/system")
			} else {
				ElNotification({title: res.data.msg, type: "error"});
			}
		})
	}
}
onMounted(() => {
})
</script>
<style lang="scss" scoped>
:deep(input::-webkit-input-placeholder) {
	color: #fff !important;
}

:deep(.el-select),
:deep(.el-input),
:deep(.el-input__wrapper),
:deep(.el-input__inner) {
	background-color: transparent !important;
	border-radius: 0px;
	border: none !important;
	box-shadow: none !important;
	color: #fff !important;

}

:deep(.el-select .el-input .el-select__caret.el-icon) {
	color: #33C8FF;
	font-size: 20px !important;
}

.view_box {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background-image: url("@/assets/images/img/bg.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;

	.box {
		width: 40vw;
		margin: 20vh auto;
		display: flex;
		flex-direction: column;
		align-items: center;

		.title {
			font-size: 26px;
			color: #eee;
			text-align: center;
			font-weight: 700;
			margin-bottom: 40px;
		}

		.content_box {
			width: 50%;
			display: flex;
			flex-direction: column;

			.inner_box {
				position: relative;
				width: 100%;
				height: 40px;
				border: 1px solid hsla(0, 0%, 100%, 0.1);
				background: rgba(0, 0, 0, 0.1);
				border-radius: 5px;
				color: #454545;
				margin-bottom: 20px;
				display: flex;
				align-items: center;
				justify-content: center;

				.codeImg {
					width: 80px;
					height: 100%;
					position: absolute;
					background-color: seagreen;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					user-select: none;
					cursor: pointer;
				}
			}
		}

		.login {
			width: 50%;
			height: 40px;
			line-height: 40px;
			text-align: center;
			font-size: 16px;
			color: #fff;
			background-color: #409eff;
			border-radius: 4px;
			user-select: none;
			cursor: pointer;
		}
	}
}
</style>
